--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 9566e49d1e6f82ca68eb115f5d7d660ab67719a8
Parents : fb08e76
Author : Ivan <ivan@quad4.io>
Signature : Invalid signer <e46112d44649266d71fe2193e00a4710>, author is <ivan@quad4.io>
Date : 2026-07-16T10:36:28-05:00
feat: implement WebGL rendering for network visualiser
Changes
22 files changed, 1624 insertions(+), 33 deletions(-)
Diff
diff --git a/meshchatx.rsm b/meshchatx.rsm
index 5d2959c9..e53c2997 100644
Binary files a/meshchatx.rsm and b/meshchatx.rsm differ
diff --git a/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index bc4082c2..156232c8 100644
--- a/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -2,8 +2,22 @@
<template>
<div class="flex-1 h-full min-w-0 relative dark:bg-zinc-950 overflow-hidden">
- <!-- network -->
- <div id="network" class="w-full h-full"></div>
+ <!-- vis-network fallback canvas host -->
+ <div id="network" class="w-full h-full" :class="{ hidden: rendererMode === 'webgl' }"></div>
+ <!-- WebGL + WASM scene (preferred when available) -->
+ <canvas
+ id="network-webgl"
+ ref="webglCanvas"
+ class="w-full h-full absolute inset-0"
+ :class="{ hidden: rendererMode !== 'webgl' }"
+ ></canvas>
+ <div
+ v-if="rendererMode === 'webgl' && hoverTooltip"
+ class="pointer-events-none absolute z-20 max-w-xs rounded-xl border border-zinc-600/50 bg-zinc-950/90 px-3 py-2 text-xs font-medium text-zinc-100 shadow-lg whitespace-pre-line"
+ :style="{ left: `${hoverTooltip.x + 12}px`, top: `${hoverTooltip.y + 12}px` }"
+ >
+ {{ hoverTooltip.text }}
+ </div>
<NetworkVisualiserLoadingOverlay
:is-loading="isLoading"
@@ -21,8 +35,8 @@
:auto-reload="autoReload"
:enable-physics="enablePhysics"
:hop-max-filter="hopMaxFilter"
- :node-count="nodes.length"
- :edge-count="edges.length"
+ :node-count="displayNodeCount"
+ :edge-count="displayEdgeCount"
:online-interface-count="onlineInterfaces.length"
:offline-interface-count="offlineInterfaces.length"
:search-query="searchQuery"
@@ -67,6 +81,7 @@ import {
warmVisualiserWasm,
} from "../../js/networkVisualiserPerf.js";
import { isVisualiserWasmReady } from "../../js/VisualiserWasmLoader.js";
+import { canUseVisualiserWebGL, createVisualiserWebGLEngine } from "../../js/networkVisualiserWebGLEngine.js";
import { loadVisualiserCache, saveVisualiserCache } from "../../js/networkVisualiserCache.js";
import {
BATTERY_SAVER_CHANGED_EVENT,
@@ -187,6 +202,11 @@ export default {
conversations: {},
network: null,
+ webglEngine: null,
+ rendererMode: "vis",
+ graphNodeCount: 0,
+ graphEdgeCount: 0,
+ hoverTooltip: null,
nodes: new DataSet(),
edges: new DataSet(),
iconCache: {},
@@ -228,6 +248,17 @@ export default {
hopFilterMax() {
return this.hopMaxFilter;
},
+ displayNodeCount() {
+ if (this.rendererMode === "webgl") return this.graphNodeCount;
+ return this.nodes.length;
+ },
+ displayEdgeCount() {
+ if (this.rendererMode === "webgl") return this.graphEdgeCount;
+ return this.edges.length;
+ },
+ hasRenderer() {
+ return Boolean(this.network || this.webglEngine);
+ },
},
watch: {
autoReload(val) {
@@ -300,6 +331,10 @@ export default {
this.lodRafId = null;
}
this.stopFpsMeter();
+ if (this.webglEngine) {
+ this.webglEngine.destroy();
+ this.webglEngine = null;
+ }
if (this.network) {
this.network.destroy();
}
@@ -334,7 +369,7 @@ export default {
this._visualiserPrefsHandler = () => {
this.loadVisualiserDisplayPrefs();
this.applyBatterySaverVisualiserPrefs();
- if (this.network) {
+ if (this.hasRenderer) {
this.processVisualization();
}
};
@@ -344,7 +379,7 @@ export default {
this.batterySaverPrefs = prefs || loadBatterySaverPrefs();
this.applyBatterySaverVisualiserPrefs();
this.restartAutoReloadInterval();
- if (this.network) {
+ if (this.hasRenderer) {
this.processVisualization();
}
};
@@ -392,9 +427,17 @@ export default {
resolveEngineMode() {
warmVisualiserWasm()
.then((ok) => {
+ if (this.rendererMode === "webgl") {
+ this.engineMode = "webgl";
+ return;
+ }
this.engineMode = ok && isVisualiserWasmReady() ? "wasm" : "fallback";
})
.catch(() => {
+ if (this.rendererMode === "webgl") {
+ this.engineMode = "webgl";
+ return;
+ }
this.engineMode = "fallback";
});
},
@@ -409,8 +452,12 @@ export default {
this.fps = Math.round((this.fpsFrameCount * 1000) / elapsed);
this.fpsFrameCount = 0;
this.fpsLastSampleMs = now;
- if (this.engineMode === "checking" && isVisualiserWasmReady()) {
- this.engineMode = "wasm";
+ if (this.engineMode === "checking") {
+ if (this.rendererMode === "webgl") {
+ this.engineMode = "webgl";
+ } else if (isVisualiserWasmReady()) {
+ this.engineMode = "wasm";
+ }
}
}
this.fpsRafId = requestAnimationFrame(tick);
@@ -424,6 +471,16 @@ export default {
}
},
snapshotNodePositions() {
+ if (this.webglEngine) {
+ const snap = this.webglEngine.getPositions() || {};
+ const out = {};
+ for (const [id, p] of Object.entries(snap)) {
+ if (p && Number.isFinite(p.x) && Number.isFinite(p.y)) {
+ out[id] = { x: p.x, y: p.y };
+ }
+ }
+ return out;
+ }
const out = {};
if (!this.network || typeof this.network.getPositions !== "function") {
return out;
@@ -750,6 +807,14 @@ export default {
this.autoReload = p.autoReload;
},
refreshPhysicsEnabled() {
+ if (this.webglEngine) {
+ this.webglEngine.setLiveLayout(this.enablePhysics);
+ if (!this.enablePhysics) {
+ const snap = this.webglEngine.getPositions() || {};
+ this.cachedPositions = { ...this.cachedPositions, ...snap };
+ }
+ return;
+ }
if (!this.network) return;
if (this.physicsPausedForDrag) return;
// Freeze current coordinates before stopping the solver so peers
@@ -828,8 +893,75 @@ export default {
return v;
},
async init() {
+ await warmVisualiserWasm();
+ const canvas = this.$refs.webglCanvas;
+ if (canvas && canUseVisualiserWebGL(canvas)) {
+ try {
+ this.webglEngine = createVisualiserWebGLEngine(canvas, {
+ getLiveLayout: () => this.enablePhysics === true,
+ isDark: () => document.documentElement.classList.contains("dark"),
+ onNodeActivate: (id, meta) => this.onWebGLNodeActivate(id, meta),
+ onHover: (id, meta, x, y) => this.onWebGLHover(id, meta, x, y),
+ });
+ this.rendererMode = "webgl";
+ this.engineMode = "webgl";
+ await this.manualUpdate();
+ this.restartAutoReloadInterval();
+ return;
+ } catch (e) {
+ console.warn("WebGL visualiser failed, falling back to vis-network:", e);
+ if (this.webglEngine) {
+ this.webglEngine.destroy();
+ this.webglEngine = null;
+ }
+ this.rendererMode = "vis";
+ }
+ }
+ await this.initVisNetwork();
+ },
+ onWebGLNodeActivate(id, meta) {
+ const announce = meta?.announce;
+ if (!announce) return;
+ this.openAnnounceDestination(announce, id);
+ },
+ openAnnounceDestination(announce, fallbackHash = "") {
+ if (!announce) return;
+ const destinationHash = (announce.destination_hash || announce.destinationHash || fallbackHash || "")
+ .toString()
+ .trim();
+ if (!destinationHash) return;
+
+ if (announce.aspect === "lxmf.delivery") {
+ this.$router.push({
+ name: "messages",
+ params: { destinationHash },
+ });
+ return;
+ }
+ if (announce.aspect === "nomadnetwork.node") {
+ // Navigate directly. Do not rely on nomad-open-node: that listener
+ // only exists while NomadNetworkBrowser is mounted (keep-alive).
+ this.$router
+ .push({
+ name: "nomadnetwork",
+ params: { destinationHash },
+ query: { newTab: "1" },
+ })
+ .catch(() => {});
+ }
+ },
+ onWebGLHover(id, meta, x, y) {
+ if (!id || !meta) {
+ this.hoverTooltip = null;
+ return;
+ }
+ const text = meta.title || meta.label || id;
+ this.hoverTooltip = { x, y, text };
+ },
+ async initVisNetwork() {
const container = document.getElementById("network");
const isDarkMode = document.documentElement.classList.contains("dark");
+ this.rendererMode = "vis";
this.network = new Network(
container,
@@ -909,18 +1041,7 @@ export default {
const node = this.nodes.get(clickedNodeId);
if (!node || !node._announce) return;
- const announce = node._announce;
- if (announce.aspect === "lxmf.delivery") {
- this.$router.push({
- name: "messages",
- params: { destinationHash: announce.destination_hash },
- });
- } else if (announce.aspect === "nomadnetwork.node") {
- GlobalEmitter.emit("nomad-open-node", {
- destinationHash: announce.destination_hash,
- forceNewTab: true,
- });
- }
+ this.openAnnounceDestination(node._announce, clickedNodeId);
});
this.refreshPhysicsEnabled();
@@ -1155,6 +1276,10 @@ export default {
await this._processVisualizationGraph(runId);
} finally {
if (runId === this.vizRunGeneration) {
+ if (this.webglEngine) {
+ this.webglEngine.setLiveLayout(this.enablePhysics);
+ this.webglEngine.requestRedraw();
+ }
if (this.network && !this.didDisableStabilization) {
this.didDisableStabilization = true;
this.network.setOptions({
@@ -1186,7 +1311,14 @@ export default {
}
}
const existingNodeIds = this.nodes.getIds();
- if (this.network) {
+ if (this.webglEngine) {
+ const snap = this.webglEngine.getPositions() || {};
+ for (const [id, p] of Object.entries(snap)) {
+ if (p && Number.isFinite(p.x) && Number.isFinite(p.y)) {
+ posById[id] = { x: p.x, y: p.y };
+ }
+ }
+ } else if (this.network) {
const snap = this.network.getPositions(existingNodeIds);
if (snap) {
for (const id of existingNodeIds) {
@@ -1483,6 +1615,23 @@ export default {
const chunkSize = this.vizChunkSize;
this.totalBatches = Math.max(1, Math.ceil(Math.max(graphNodes.length, graphEdges.length) / chunkSize));
this.currentBatch = 0;
+
+ if (this.webglEngine && this.rendererMode === "webgl") {
+ this.loadingStatus = "Uploading scene...";
+ this.webglEngine.setGraph(graphNodes, graphEdges);
+ const counts = this.webglEngine.getCounts();
+ this.graphNodeCount = counts.nodes;
+ this.graphEdgeCount = counts.edges;
+ const snap = this.webglEngine.getPositions() || {};
+ this.cachedPositions = { ...this.cachedPositions, ...snap };
+ this.loadedNodesCount = this.pathTable.length;
+ this.totalNodesToLoad = 0;
+ this.loadedNodesCount = 0;
+ this.currentBatch = 0;
+ this.totalBatches = 0;
+ return;
+ }
+
const applyLimit = Math.max(graphNodes.length, graphEdges.length);
for (let i = 0; i < applyLimit; i += chunkSize) {
if (!isCurrentRun()) return;
@@ -1504,6 +1653,8 @@ export default {
const edgesToRemove = this.edges.getIds().filter((id) => !processedEdgeIds.has(id));
if (edgesToRemove.length > 0) this.edges.remove(edgesToRemove);
+ this.graphNodeCount = this.nodes.length;
+ this.graphEdgeCount = this.edges.length;
this.totalNodesToLoad = 0;
this.loadedNodesCount = 0;
this.currentBatch = 0;
@@ -1593,13 +1744,15 @@ export default {
pointer-events: none !important;
}
-#network {
+#network,
+#network-webgl {
background-color: #f8fafc;
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
background-size: 32px 32px;
}
-.dark #network {
+.dark #network,
+.dark #network-webgl {
background-color: #09090b;
background-image: radial-gradient(#18181b 1px, transparent 1px);
background-size: 32px 32px;
diff --git a/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue
index 881aed63..c6ea9ea0 100644
--- a/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue
+++ b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue
@@ -278,16 +278,19 @@ export default {
return String(this.hopMaxFilter);
},
engineModeLabel() {
+ if (this.engineMode === "webgl") return this.$t("visualiser.engine_webgl");
if (this.engineMode === "wasm") return this.$t("visualiser.engine_wasm");
if (this.engineMode === "fallback") return this.$t("visualiser.engine_fallback");
return this.$t("visualiser.engine_checking");
},
engineModeTitle() {
+ if (this.engineMode === "webgl") return this.$t("visualiser.engine_webgl_hint");
if (this.engineMode === "wasm") return this.$t("visualiser.engine_wasm_hint");
if (this.engineMode === "fallback") return this.$t("visualiser.engine_fallback_hint");
return this.$t("visualiser.engine_checking_hint");
},
engineModeClass() {
+ if (this.engineMode === "webgl") return "text-sky-600 dark:text-sky-400";
if (this.engineMode === "wasm") return "text-emerald-600 dark:text-emerald-400";
if (this.engineMode === "fallback") return "text-amber-600 dark:text-amber-400";
return "text-gray-500 dark:text-zinc-400";
diff --git a/meshchatx/src/frontend/js/VisualiserWasmLoader.js b/meshchatx/src/frontend/js/VisualiserWasmLoader.js
index 36bc78ed..e765ecb1 100644
--- a/meshchatx/src/frontend/js/VisualiserWasmLoader.js
+++ b/meshchatx/src/frontend/js/VisualiserWasmLoader.js
@@ -115,6 +115,17 @@ function isReady() {
);
}
+/** True when WASM scene exports for the WebGL renderer are registered. */
+export function isVisualiserWebGLSceneReady() {
+ return (
+ isReady() &&
+ typeof globalThis.meshchatxVisualiserSceneSet === "function" &&
+ typeof globalThis.meshchatxVisualiserSceneGetDrawBuffers === "function" &&
+ typeof globalThis.meshchatxVisualiserSceneTick === "function" &&
+ typeof globalThis.meshchatxVisualiserScenePick === "function"
+ );
+}
+
async function instantiateOnce() {
if (typeof WebAssembly === "undefined") {
throw new Error("Visualiser WASM: WebAssembly is not available");
diff --git a/meshchatx/src/frontend/js/networkVisualiserWebGL.js b/meshchatx/src/frontend/js/networkVisualiserWebGL.js
new file mode 100644
index 00000000..37816079
--- /dev/null
+++ b/meshchatx/src/frontend/js/networkVisualiserWebGL.js
@@ -0,0 +1,286 @@
+/**
+ * WebGL2 canvas renderer for MeshChatX network visualiser.
+ * Draws instanced node discs and line edges from WASM float buffers.
+ */
+
+const NODE_STRIDE = 8;
+const EDGE_STRIDE = 8;
+
+const NODE_VS = `#version 300 es
+layout(location=0) in vec2 a_corner;
+layout(location=1) in vec2 a_center;
+layout(location=2) in float a_size;
+layout(location=3) in vec4 a_color;
+uniform vec2 u_resolution;
+uniform vec2 u_camera;
+uniform float u_zoom;
+out vec4 v_color;
+out vec2 v_uv;
+void main() {
+ v_uv = a_corner;
+ v_color = a_color;
+ float r = max(a_size, 2.0);
+ vec2 world = a_center + a_corner * r;
+ vec2 screen = (world - u_camera) * u_zoom + u_resolution * 0.5;
+ vec2 clip = (screen / u_resolution) * 2.0 - 1.0;
+ clip.y = -clip.y;
+ gl_Position = vec4(clip, 0.0, 1.0);
+}
+`;
+
+const NODE_FS = `#version 300 es
+precision mediump float;
+in vec4 v_color;
+in vec2 v_uv;
+out vec4 outColor;
+void main() {
+ float d = length(v_uv);
+ if (d > 1.0) discard;
+ float edge = smoothstep(1.0, 0.72, d);
+ outColor = vec4(v_color.rgb, v_color.a * edge);
+}
+`;
+
+const EDGE_VS = `#version 300 es
+layout(location=0) in vec2 a_pos;
+layout(location=1) in vec4 a_color;
+uniform vec2 u_resolution;
+uniform vec2 u_camera;
+uniform float u_zoom;
+out vec4 v_color;
+void main() {
+ v_color = a_color;
+ vec2 screen = (a_pos - u_camera) * u_zoom + u_resolution * 0.5;
+ vec2 clip = (screen / u_resolution) * 2.0 - 1.0;
+ clip.y = -clip.y;
+ gl_Position = vec4(clip, 0.0, 1.0);
+}
+`;
+
+const EDGE_FS = `#version 300 es
+precision mediump float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+ outColor = v_color;
+}
+`;
+
+function compile(gl, type, src) {
+ const sh = gl.createShader(type);
+ gl.shaderSource(sh, src);
+ gl.compileShader(sh);
+ if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+ const info = gl.getShaderInfoLog(sh);
+ gl.deleteShader(sh);
+ throw new Error(`WebGL shader: ${info}`);
+ }
+ return sh;
+}
+
+function link(gl, vsSrc, fsSrc) {
+ const vs = compile(gl, gl.VERTEX_SHADER, vsSrc);
+ const fs = compile(gl, gl.FRAGMENT_SHADER, fsSrc);
+ const prog = gl.createProgram();
+ gl.attachShader(prog, vs);
+ gl.attachShader(prog, fs);
+ gl.linkProgram(prog);
+ gl.deleteShader(vs);
+ gl.deleteShader(fs);
+ if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+ const info = gl.getProgramInfoLog(prog);
+ gl.deleteProgram(prog);
+ throw new Error(`WebGL program: ${info}`);
+ }
+ return prog;
+}
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @returns {WebGL2RenderingContext|null}
+ */
+export function tryCreateWebGL2Context(canvas) {
+ if (!canvas || typeof canvas.getContext !== "function") return null;
+ try {
+ return canvas.getContext("webgl2", {
+ alpha: false,
+ antialias: true,
+ depth: false,
+ stencil: false,
+ powerPreference: "high-performance",
+ });
+ } catch {
+ return null;
+ }
+}
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {WebGL2RenderingContext} gl
+ */
+export function createNetworkVisualiserWebGL(canvas, gl) {
+ const nodeProg = link(gl, NODE_VS, NODE_FS);
+ const edgeProg = link(gl, EDGE_VS, EDGE_FS);
+
+ const nodeCornerBuf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, nodeCornerBuf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+
+ const nodeInstanceBuf = gl.createBuffer();
+ const edgeBuf = gl.createBuffer();
+
+ const nodeVao = gl.createVertexArray();
+ gl.bindVertexArray(nodeVao);
+ gl.bindBuffer(gl.ARRAY_BUFFER, nodeCornerBuf);
+ gl.enableVertexAttribArray(0);
+ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, nodeInstanceBuf);
+ // center xy
+ gl.enableVertexAttribArray(1);
+ gl.vertexAttribPointer(1, 2, gl.FLOAT, false, NODE_STRIDE * 4, 0);
+ gl.vertexAttribDivisor(1, 1);
+ // size
+ gl.enableVertexAttribArray(2);
+ gl.vertexAttribPointer(2, 1, gl.FLOAT, false, NODE_STRIDE * 4, 8);
+ gl.vertexAttribDivisor(2, 1);
+ // rgba
+ gl.enableVertexAttribArray(3);
+ gl.vertexAttribPointer(3, 4, gl.FLOAT, false, NODE_STRIDE * 4, 12);
+ gl.vertexAttribDivisor(3, 1);
+ gl.bindVertexArray(null);
+
+ const edgeVao = gl.createVertexArray();
+ gl.bindVertexArray(edgeVao);
+ gl.bindBuffer(gl.ARRAY_BUFFER, edgeBuf);
+ gl.enableVertexAttribArray(0);
+ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 6 * 4, 0);
+ gl.enableVertexAttribArray(1);
+ gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 6 * 4, 8);
+ gl.bindVertexArray(null);
+
+ const uNodeRes = gl.getUniformLocation(nodeProg, "u_resolution");
+ const uNodeCam = gl.getUniformLocation(nodeProg, "u_camera");
+ const uNodeZoom = gl.getUniformLocation(nodeProg, "u_zoom");
+ const uEdgeRes = gl.getUniformLocation(edgeProg, "u_resolution");
+ const uEdgeCam = gl.getUniformLocation(edgeProg, "u_camera");
+ const uEdgeZoom = gl.getUniformLocation(edgeProg, "u_zoom");
+
+ let cssW = 1;
+ let cssH = 1;
+ let nodeCount = 0;
+ let edgeVertexCount = 0;
+ let edgeScratch = new Float32Array(0);
+
+ function resize() {
+ const dpr = Math.min(window.devicePixelRatio || 1, 2);
+ const rect = canvas.getBoundingClientRect();
+ cssW = Math.max(1, rect.width || canvas.clientWidth || 1);
+ cssH = Math.max(1, rect.height || canvas.clientHeight || 1);
+ const bw = Math.max(1, Math.floor(cssW * dpr));
+ const bh = Math.max(1, Math.floor(cssH * dpr));
+ if (canvas.width !== bw || canvas.height !== bh) {
+ canvas.width = bw;
+ canvas.height = bh;
+ }
+ gl.viewport(0, 0, canvas.width, canvas.height);
+ return { width: cssW, height: cssH };
+ }
+
+ /**
+ * @param {Float32Array} nodes packed NODE_STRIDE
+ * @param {Float32Array} edges packed EDGE_STRIDE
+ * @param {{x:number,y:number,zoom:number}} camera
+ * @param {boolean} dark
+ */
+ function draw(nodes, edges, camera, dark) {
+ const size = resize();
+ const camX = camera?.x ?? 0;
+ const camY = camera?.y ?? 0;
+ const zoom = camera?.zoom > 0 ? camera.zoom : 1;
+
+ if (dark) {
+ gl.clearColor(0.035, 0.035, 0.04, 1);
+ } else {
+ gl.clearColor(0.973, 0.98, 0.988, 1);
+ }
+ gl.clear(gl.COLOR_BUFFER_BIT);
+ gl.enable(gl.BLEND);
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+
+ nodeCount = nodes && nodes.length ? Math.floor(nodes.length / NODE_STRIDE) : 0;
+ const edgeCount = edges && edges.length ? Math.floor(edges.length / EDGE_STRIDE) : 0;
+
+ // Expand edges to 2 verts * (xy + rgba) = 12 floats per edge -> 6 floats per vertex
+ const need = edgeCount * 12;
+ if (edgeScratch.length < need) {
+ edgeScratch = new Float32Array(Math.max(need, 64));
+ }
+ for (let i = 0; i < edgeCount; i++) {
+ const o = i * EDGE_STRIDE;
+ const d = i * 12;
+ const x1 = edges[o];
+ const y1 = edges[o + 1];
+ const x2 = edges[o + 2];
+ const y2 = edges[o + 3];
+ const r = edges[o + 4];
+ const g = edges[o + 5];
+ const b = edges[o + 6];
+ const a = edges[o + 7];
+ edgeScratch[d] = x1;
+ edgeScratch[d + 1] = y1;
+ edgeScratch[d + 2] = r;
+ edgeScratch[d + 3] = g;
+ edgeScratch[d + 4] = b;
+ edgeScratch[d + 5] = a;
+ edgeScratch[d + 6] = x2;
+ edgeScratch[d + 7] = y2;
+ edgeScratch[d + 8] = r;
+ edgeScratch[d + 9] = g;
+ edgeScratch[d + 10] = b;
+ edgeScratch[d + 11] = a;
+ }
+ edgeVertexCount = edgeCount * 2;
+
+ if (edgeVertexCount > 0) {
+ gl.useProgram(edgeProg);
+ gl.uniform2f(uEdgeRes, size.width, size.height);
+ gl.uniform2f(uEdgeCam, camX, camY);
+ gl.uniform1f(uEdgeZoom, zoom);
+ gl.bindVertexArray(edgeVao);
+ gl.bindBuffer(gl.ARRAY_BUFFER, edgeBuf);
+ gl.bufferData(gl.ARRAY_BUFFER, edgeScratch.subarray(0, need), gl.DYNAMIC_DRAW);
+ gl.lineWidth(1);
+ gl.drawArrays(gl.LINES, 0, edgeVertexCount);
+ gl.bindVertexArray(null);
+ }
+
+ if (nodeCount > 0) {
+ gl.useProgram(nodeProg);
+ gl.uniform2f(uNodeRes, size.width, size.height);
+ gl.uniform2f(uNodeCam, camX, camY);
+ gl.uniform1f(uNodeZoom, zoom);
+ gl.bindVertexArray(nodeVao);
+ gl.bindBuffer(gl.ARRAY_BUFFER, nodeInstanceBuf);
+ gl.bufferData(gl.ARRAY_BUFFER, nodes, gl.DYNAMIC_DRAW);
+ gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, nodeCount);
+ gl.bindVertexArray(null);
+ }
+
+ return size;
+ }
+
+ function destroy() {
+ gl.deleteBuffer(nodeCornerBuf);
+ gl.deleteBuffer(nodeInstanceBuf);
+ gl.deleteBuffer(edgeBuf);
+ gl.deleteVertexArray(nodeVao);
+ gl.deleteVertexArray(edgeVao);
+ gl.deleteProgram(nodeProg);
+ gl.deleteProgram(edgeProg);
+ }
+
+ return { draw, resize, destroy, getCssSize: () => ({ width: cssW, height: cssH }) };
+}
+
+export { NODE_STRIDE, EDGE_STRIDE };
diff --git a/meshchatx/src/frontend/js/networkVisualiserWebGLEngine.js b/meshchatx/src/frontend/js/networkVisualiserWebGLEngine.js
new file mode 100644
index 00000000..b5b1cd38
--- /dev/null
+++ b/meshchatx/src/frontend/js/networkVisualiserWebGLEngine.js
@@ -0,0 +1,379 @@
+/**
+ * WASM scene + WebGL2 engine for the network visualiser.
+ * Falls back is handled by the caller (vis-network path).
+ */
+
+import { callVisualiserWasmJson, isVisualiserWebGLSceneReady } from "./VisualiserWasmLoader.js";
+import { createNetworkVisualiserWebGL, tryCreateWebGL2Context } from "./networkVisualiserWebGL.js";
+
+export { isVisualiserWebGLSceneReady };
+
+export const KIND_ME = 0;
+export const KIND_IFACE_ON = 1;
+export const KIND_IFACE_OFF = 2;
+export const KIND_PEER = 3;
+export const KIND_DISCOVERED = 4;
+
+/**
+ * True when WASM scene exports needed for WebGL path are present.
+ * Re-exported from VisualiserWasmLoader for callers that import the engine module.
+ */
+
+/**
+ * @param {HTMLCanvasElement} [_canvas] optional host (capability is global)
+ */
+export function canUseVisualiserWebGL() {
+ if (!isVisualiserWebGLSceneReady()) return false;
+ if (typeof WebGL2RenderingContext === "undefined") return false;
+ if (typeof document === "undefined") return false;
+ const probe = document.createElement("canvas");
+ return !!tryCreateWebGL2Context(probe);
+}
+
+function hexToRgb01(hex) {
+ if (typeof hex !== "string") return null;
+ let h = hex.trim();
+ if (h.startsWith("#")) h = h.slice(1);
+ if (h.length === 3) {
+ h = `${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`;
+ }
+ if (h.length !== 6) return null;
+ const n = Number.parseInt(h, 16);
+ if (!Number.isFinite(n)) return null;
+ return {
+ r: ((n >> 16) & 255) / 255,
+ g: ((n >> 8) & 255) / 255,
+ b: (n & 255) / 255,
+ };
+}
+
+function colorFromNode(node) {
+ const c = node?.color;
+ if (typeof c === "string") {
+ const rgb = hexToRgb01(c);
+ if (rgb) return rgb;
+ }
+ if (c && typeof c === "object") {
+ const border = c.border || c.background;
+ const rgb = hexToRgb01(border);
+ if (rgb) return rgb;
+ }
+ return null;
+}
+
+function colorFromEdge(edge) {
+ const c = edge?.color;
+ if (typeof c === "string") {
+ const rgb = hexToRgb01(c);
+ if (rgb) return { ...rgb, a: 0.55 };
+ }
+ if (c && typeof c === "object") {
+ const rgb = hexToRgb01(c.color);
+ const a = typeof c.opacity === "number" ? c.opacity : 0.55;
+ if (rgb) return { ...rgb, a };
+ }
+ return { r: 0.45, g: 0.45, b: 0.55, a: 0.45 };
+}
+
+function kindForNode(node) {
+ const g = node?.group;
+ if (g === "me" || node?.id === "me") return KIND_ME;
+ if (g === "discovered") return KIND_DISCOVERED;
+ if (g === "interface") {
+ const img = String(node?.image || "");
+ if (img.includes("disconnected")) return KIND_IFACE_OFF;
+ const border = node?.color?.border || "";
+ if (border === "#ef4444" || border === "#f87171") return KIND_IFACE_OFF;
+ return KIND_IFACE_ON;
+ }
+ return KIND_PEER;
+}
+
+function sizeForNode(node, kind) {
+ const s = Number(node?.size);
+ if (Number.isFinite(s) && s > 0) {
+ // vis sizes are large; scale down for disc radius in world units
+ return Math.max(6, Math.min(28, s * 0.35));
+ }
+ if (kind === KIND_ME) return 18;
+ if (kind === KIND_IFACE_ON || kind === KIND_IFACE_OFF) return 12;
+ if (kind === KIND_DISCOVERED) return 9;
+ return 10;
+}
+
+/**
+ * Convert vis-style graph nodes/edges into WASM scene SetRequest payload.
+ * @param {object[]} graphNodes
+ * @param {object[]} graphEdges
+ * @param {{width:number,height:number,camX?:number,camY?:number,zoom?:number}} view
+ */
+export function graphToSceneRequest(graphNodes, graphEdges, view) {
+ const nodes = [];
+ for (const n of graphNodes || []) {
+ if (!n?.id) continue;
+ const kind = kindForNode(n);
+ const rgb = colorFromNode(n) || { r: 0.85, g: 0.85, b: 0.9 };
+ nodes.push({
+ id: String(n.id),
+ x: Number.isFinite(n.x) ? n.x : 0,
+ y: Number.isFinite(n.y) ? n.y : 0,
+ mass: n.id === "me" ? 4 : n.group === "interface" ? 2.5 : 1,
+ fixed: n.id === "me",
+ kind,
+ size: sizeForNode(n, kind),
+ r: rgb.r,
+ g: rgb.g,
+ b: rgb.b,
+ a: 1,
+ });
+ }
+ const edges = [];
+ for (const e of graphEdges || []) {
+ if (!e?.from || !e?.to) continue;
+ const rgb = colorFromEdge(e);
+ edges.push({
+ from: String(e.from),
+ to: String(e.to),
+ width: Number(e.width) || 1,
+ r: rgb.r,
+ g: rgb.g,
+ b: rgb.b,
+ a: rgb.a,
+ });
+ }
+ return {
+ nodes,
+ edges,
+ width: view?.width || 800,
+ height: view?.height || 600,
+ cam_x: view?.camX ?? 0,
+ cam_y: view?.camY ?? 0,
+ zoom: view?.zoom > 0 ? view.zoom : 1,
+ };
+}
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {{
+ * getLiveLayout: () => boolean,
+ * isDark: () => boolean,
+ * onNodeActivate?: (id: string, meta: object|null) => void,
+ * onHover?: (id: string|null, meta: object|null, cssX: number, cssY: number) => void,
+ * }} hooks
+ */
+export function createVisualiserWebGLEngine(canvas, hooks = {}) {
+ const gl = tryCreateWebGL2Context(canvas);
+ if (!gl) {
+ throw new Error("WebGL2 unavailable");
+ }
+ if (!isVisualiserWebGLSceneReady()) {
+ throw new Error("WASM scene unavailable");
+ }
+
+ const renderer = createNetworkVisualiserWebGL(canvas, gl);
+ const metaById = new Map();
+ let rafId = null;
+ let running = true;
+ let dirty = true;
+ let pointerMode = null; // "pan" | "drag" | null
+ let lastX = 0;
+ let lastY = 0;
+ let nodeCount = 0;
+ let edgeCount = 0;
+
+ function cssPoint(ev) {
+ const rect = canvas.getBoundingClientRect();
+ return {
+ x: ev.clientX - rect.left,
+ y: ev.clientY - rect.top,
+ };
+ }
+
+ function callScene(name, ...args) {
+ const fn = globalThis[name];
+ if (typeof fn !== "function") return null;
+ try {
+ return fn(...args);
+ } catch (e) {
+ console.warn("Visualiser scene call failed:", name, e);
+ return null;
+ }
+ }
+
+ function setGraph(graphNodes, graphEdges, viewOpts = {}) {
+ metaById.clear();
+ for (const n of graphNodes || []) {
+ if (!n?.id) continue;
+ metaById.set(String(n.id), {
+ id: String(n.id),
+ label: n.label || "",
+ title: n.title || "",
+ group: n.group || "",
+ announce: n._announce || null,
+ });
+ }
+ const size = renderer.resize();
+ // zoom <= 0 keeps the current WASM camera (see scene.Set).
+ const preserveCamera = viewOpts.preserveCamera !== false && nodeCount > 0;
+ const req = graphToSceneRequest(graphNodes, graphEdges, {
+ width: size.width,
+ height: size.height,
+ camX: viewOpts.camX ?? 0,
+ camY: viewOpts.camY ?? 0,
+ zoom: preserveCamera ? 0 : viewOpts.zoom > 0 ? viewOpts.zoom : 1,
+ });
+ const got = callVisualiserWasmJson("meshchatxVisualiserSceneSet", JSON.stringify(req));
+ if (!got || got.ok === false) {
+ throw new Error(got?.error || "SceneSet failed");
+ }
+ nodeCount = got.nodes || 0;
+ edgeCount = got.edges || 0;
+ dirty = true;
+ }
+
+ function getPositions() {
+ const got = callVisualiserWasmJson("meshchatxVisualiserSceneGetPositions");
+ return got?.positions && typeof got.positions === "object" ? got.positions : {};
+ }
+
+ function getCounts() {
+ return { nodes: nodeCount, edges: edgeCount };
+ }
+
+ function setLiveLayout() {
+ dirty = true;
+ }
+
+ function frame() {
+ if (!running) return;
+ rafId = requestAnimationFrame(frame);
+ const live = typeof hooks.getLiveLayout === "function" ? hooks.getLiveLayout() : false;
+ if (live && pointerMode !== "drag") {
+ callScene("meshchatxVisualiserSceneTick", 2);
+ dirty = true;
+ }
+ if (!dirty && !live) return;
+ const buf = callScene("meshchatxVisualiserSceneGetDrawBuffers");
+ if (!buf || buf.ok === false) return;
+ const camera = {
+ x: buf.camX || 0,
+ y: buf.camY || 0,
+ zoom: buf.zoom > 0 ? buf.zoom : 1,
+ };
+ const dark = typeof hooks.isDark === "function" ? hooks.isDark() : false;
+ const size = renderer.draw(buf.nodes, buf.edges, camera, dark);
+ callScene("meshchatxVisualiserSceneResize", size.width, size.height);
+ nodeCount = buf.nodeCount || nodeCount;
+ edgeCount = buf.edgeCount || edgeCount;
+ dirty = false;
+ }
+
+ function onPointerDown(ev) {
+ if (ev.button !== 0) return;
+ canvas.setPointerCapture?.(ev.pointerId);
+ const p = cssPoint(ev);
+ lastX = p.x;
+ lastY = p.y;
+ const id = callScene("meshchatxVisualiserScenePick", p.x, p.y, 16);
+ if (id) {
+ callScene("meshchatxVisualiserSceneDragStart", id);
+ pointerMode = "drag";
+ } else {
+ pointerMode = "pan";
+ }
+ dirty = true;
+ }
+
+ function onPointerMove(ev) {
+ const p = cssPoint(ev);
+ if (pointerMode === "drag") {
+ callScene("meshchatxVisualiserSceneDragTo", p.x, p.y);
+ dirty = true;
+ } else if (pointerMode === "pan") {
+ const zoomBuf = callScene("meshchatxVisualiserSceneGetDrawBuffers");
+ const zoom = zoomBuf?.zoom > 0 ? zoomBuf.zoom : 1;
+ const dx = (lastX - p.x) / zoom;
+ const dy = (lastY - p.y) / zoom;
+ callScene("meshchatxVisualiserScenePanBy", dx, dy);
+ lastX = p.x;
+ lastY = p.y;
+ dirty = true;
+ } else if (typeof hooks.onHover === "function") {
+ const id = callScene("meshchatxVisualiserScenePick", p.x, p.y, 14) || null;
+ hooks.onHover(id, id ? metaById.get(id) || null : null, p.x, p.y);
+ }
+ }
+
+ function onPointerUp(ev) {
+ if (pointerMode === "drag") {
+ callScene("meshchatxVisualiserSceneDragEnd");
+ }
+ pointerMode = null;
+ dirty = true;
+ try {
+ canvas.releasePointerCapture?.(ev.pointerId);
+ } catch {
+ /* ignore */
+ }
+ }
+
+ function onDblClick(ev) {
+ const p = cssPoint(ev);
+ const id = callScene("meshchatxVisualiserScenePick", p.x, p.y, 16);
+ if (!id) return;
+ if (typeof hooks.onNodeActivate === "function") {
+ hooks.onNodeActivate(id, metaById.get(id) || null);
+ }
+ }
+
+ function onWheel(ev) {
+ ev.preventDefault();
+ const p = cssPoint(ev);
+ const factor = ev.deltaY < 0 ? 1.12 : 1 / 1.12;
+ callScene("meshchatxVisualiserSceneZoomAt", p.x, p.y, factor);
+ dirty = true;
+ }
+
+ function onResize() {
+ const size = renderer.resize();
+ callScene("meshchatxVisualiserSceneResize", size.width, size.height);
+ dirty = true;
+ }
+
+ canvas.style.touchAction = "none";
+ canvas.addEventListener("pointerdown", onPointerDown);
+ canvas.addEventListener("pointermove", onPointerMove);
+ canvas.addEventListener("pointerup", onPointerUp);
+ canvas.addEventListener("pointercancel", onPointerUp);
+ canvas.addEventListener("dblclick", onDblClick);
+ canvas.addEventListener("wheel", onWheel, { passive: false });
+ window.addEventListener("resize", onResize);
+
+ rafId = requestAnimationFrame(frame);
+
+ function destroy() {
+ running = false;
+ if (rafId != null) cancelAnimationFrame(rafId);
+ rafId = null;
+ canvas.removeEventListener("pointerdown", onPointerDown);
+ canvas.removeEventListener("pointermove", onPointerMove);
+ canvas.removeEventListener("pointerup", onPointerUp);
+ canvas.removeEventListener("pointercancel", onPointerUp);
+ canvas.removeEventListener("dblclick", onDblClick);
+ canvas.removeEventListener("wheel", onWheel);
+ window.removeEventListener("resize", onResize);
+ renderer.destroy();
+ metaById.clear();
+ }
+
+ return {
+ setGraph,
+ getPositions,
+ getCounts,
+ setLiveLayout,
+ destroy,
+ requestRedraw: () => {
+ dirty = true;
+ },
+ };
+}
diff --git a/meshchatx/src/frontend/locales/de.json b/meshchatx/src/frontend/locales/de.json
index 007f3e7e..5f0995ad 100644
--- a/meshchatx/src/frontend/locales/de.json
+++ b/meshchatx/src/frontend/locales/de.json
@@ -3365,7 +3365,9 @@
"online": "Online",
"offline": "Offline",
"search_nodes_placeholder": "Knoten suchen ({count})...",
- "clear_search": "Suche leeren"
+ "clear_search": "Suche leeren",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Graph, Layout und Zeichenpuffer laufen in Go-WebAssembly. Pixelzeichnung mit WebGL2"
},
"banishment": {
"title": "Verbannt",
diff --git a/meshchatx/src/frontend/locales/en.json b/meshchatx/src/frontend/locales/en.json
index 381a0da4..e64bc3ea 100644
--- a/meshchatx/src/frontend/locales/en.json
+++ b/meshchatx/src/frontend/locales/en.json
@@ -1946,9 +1946,11 @@
"show_discovered_interfaces": "Show discovered interfaces",
"refresh": "Refresh",
"engine": "Engine",
+ "engine_webgl": "WebGL",
"engine_wasm": "WASM",
"engine_fallback": "JS fallback",
"engine_checking": "Checking",
+ "engine_webgl_hint": "Graph, layout, and draw buffers run in Go WebAssembly. Pixels are drawn with WebGL2",
"engine_wasm_hint": "Graph build and force layout run in Go WebAssembly. Canvas draw stays in the browser",
"engine_fallback_hint": "WASM unavailable. Graph build uses JavaScript. Live layout uses vis-network physics",
"engine_checking_hint": "Detecting WebAssembly support",
diff --git a/meshchatx/src/frontend/locales/es.json b/meshchatx/src/frontend/locales/es.json
index 1de7a896..d463ee63 100644
--- a/meshchatx/src/frontend/locales/es.json
+++ b/meshchatx/src/frontend/locales/es.json
@@ -1961,7 +1961,9 @@
"online": "En linea",
"offline": "Fuera",
"search_nodes_placeholder": "Buscar nodos ({count})...",
- "clear_search": "Borrar busqueda"
+ "clear_search": "Borrar busqueda",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Grafo, layout y buffers de dibujo en Go WebAssembly. Pixels con WebGL2"
},
"banishment": {
"title": "Desterrados",
diff --git a/meshchatx/src/frontend/locales/fi.json b/meshchatx/src/frontend/locales/fi.json
index 468ce3f0..73123347 100644
--- a/meshchatx/src/frontend/locales/fi.json
+++ b/meshchatx/src/frontend/locales/fi.json
@@ -1961,7 +1961,9 @@
"online": "Online",
"offline": "Offline",
"search_nodes_placeholder": "Hae solmuja ({count})...",
- "clear_search": "Tyhjennä haku"
+ "clear_search": "Tyhjennä haku",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Kaavio, asettelu ja piirtopuskurit Go WebAssemblyssa. Pikselit WebGL2:lla"
},
"banishment": {
"title": "Karkotus",
diff --git a/meshchatx/src/frontend/locales/fr.json b/meshchatx/src/frontend/locales/fr.json
index 2a5875f9..a60fe661 100644
--- a/meshchatx/src/frontend/locales/fr.json
+++ b/meshchatx/src/frontend/locales/fr.json
@@ -1961,7 +1961,9 @@
"online": "En ligne",
"offline": "Hors ligne",
"search_nodes_placeholder": "Rechercher des noeuds ({count})...",
- "clear_search": "Effacer la recherche"
+ "clear_search": "Effacer la recherche",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Graphe, layout et buffers de dessin en Go WebAssembly. Pixels via WebGL2"
},
"banishment": {
"title": "Interdit",
diff --git a/meshchatx/src/frontend/locales/it.json b/meshchatx/src/frontend/locales/it.json
index 1a286058..35e0181a 100644
--- a/meshchatx/src/frontend/locales/it.json
+++ b/meshchatx/src/frontend/locales/it.json
@@ -2013,7 +2013,9 @@
"online": "Online",
"offline": "Offline",
"search_nodes_placeholder": "Cerca nodi ({count})...",
- "clear_search": "Cancella ricerca"
+ "clear_search": "Cancella ricerca",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Grafo, layout e buffer di disegno in Go WebAssembly. Pixel con WebGL2"
},
"banishment": {
"title": "Esiliati",
diff --git a/meshchatx/src/frontend/locales/nl.json b/meshchatx/src/frontend/locales/nl.json
index ef6862af..2a38f384 100644
--- a/meshchatx/src/frontend/locales/nl.json
+++ b/meshchatx/src/frontend/locales/nl.json
@@ -1961,7 +1961,9 @@
"online": "Online",
"offline": "Offline",
"search_nodes_placeholder": "Zoek knooppunten ({count})...",
- "clear_search": "Zoekopdracht wissen"
+ "clear_search": "Zoekopdracht wissen",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Grafiek, layout en tekenbuffers in Go WebAssembly. Pixels met WebGL2"
},
"banishment": {
"title": "Verbannen",
diff --git a/meshchatx/src/frontend/locales/ru.json b/meshchatx/src/frontend/locales/ru.json
index 53a18a8c..01da736c 100644
--- a/meshchatx/src/frontend/locales/ru.json
+++ b/meshchatx/src/frontend/locales/ru.json
@@ -3365,7 +3365,9 @@
"online": "Онлайн",
"offline": "Офлайн",
"search_nodes_placeholder": "Поиск узлов ({count})...",
- "clear_search": "Очистить поиск"
+ "clear_search": "Очистить поиск",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "Граф, раскладка и буферы отрисовки в Go WebAssembly. Пиксели через WebGL2"
},
"banishment": {
"title": "Забаненные",
diff --git a/meshchatx/src/frontend/locales/zh.json b/meshchatx/src/frontend/locales/zh.json
index 59eebabc..4b29672e 100644
--- a/meshchatx/src/frontend/locales/zh.json
+++ b/meshchatx/src/frontend/locales/zh.json
@@ -1961,7 +1961,9 @@
"online": "在线",
"offline": "离线",
"search_nodes_placeholder": "搜索节点 ({count})...",
- "clear_search": "清除搜索"
+ "clear_search": "清除搜索",
+ "engine_webgl": "WebGL",
+ "engine_webgl_hint": "图构建、布局与绘制缓冲在 Go WebAssembly 中运行。像素由 WebGL2 绘制"
},
"banishment": {
"title": "放逐",
diff --git a/meshchatx/src/frontend/public/vendor/visualiser-wasm/integrity.json b/meshchatx/src/frontend/public/vendor/visualiser-wasm/integrity.json
index 1dd35c17..0d0d63ad 100644
--- a/meshchatx/src/frontend/public/vendor/visualiser-wasm/integrity.json
+++ b/meshchatx/src/frontend/public/vendor/visualiser-wasm/integrity.json
@@ -1,6 +1,6 @@
{
"version": "1.0.0",
- "wasm": "sha384-2R/q2Rz5H8EC/+/n7Tu8nCVP+GoJRAWWHFTUpk9uMwUIsVC/nVb024C0zs4cU512",
+ "wasm": "sha384-ERsG9mb3L8kjxDEvn36T/mdj3Cz4zPA7U/hNo6Nppt9sjE0VAuNT3XjHsFDx9P/b",
"wasmExec": "sha384-PWCs+V4BDf9yY1yjkD/p+9xNEs4iEbuvq+HezAOJiY3XL5GI6VyJXMsvnjiwNbce",
"wasmExecSource": "/usr/lib/go/lib/wasm/wasm_exec.js"
}
diff --git a/tests/frontend/NetworkVisualiserToolbar.test.js b/tests/frontend/NetworkVisualiserToolbar.test.js
index 47706e93..bcb64121 100644
--- a/tests/frontend/NetworkVisualiserToolbar.test.js
+++ b/tests/frontend/NetworkVisualiserToolbar.test.js
@@ -40,6 +40,12 @@ describe("NetworkVisualiserToolbar", () => {
expect(wrapper.text()).toContain("--");
});
+ it("shows WebGL engine label", () => {
+ const wrapper = mountToolbar({ engineMode: "webgl", fps: 60 });
+ expect(wrapper.text()).toContain("visualiser.engine_webgl");
+ expect(wrapper.text()).toContain("60");
+ });
+
it("uses MDI magnify for search and refresh for update button", () => {
const wrapper = mountToolbar({ isUpdating: false, isLoading: false });
const icons = wrapper.findAll(".mdi-stub").map((n) => n.attributes("data-icon"));
diff --git a/tests/frontend/VisualiserWasmLoader.test.js b/tests/frontend/VisualiserWasmLoader.test.js
index e4fc0d6b..5fa86f03 100644
--- a/tests/frontend/VisualiserWasmLoader.test.js
+++ b/tests/frontend/VisualiserWasmLoader.test.js
@@ -3,6 +3,7 @@ import {
isVisualiserWasmBundled,
preloadVisualiserWasm,
isVisualiserWasmReady,
+ isVisualiserWebGLSceneReady,
callVisualiserWasmJson,
} from "@/js/VisualiserWasmLoader.js";
@@ -54,4 +55,8 @@ describe("VisualiserWasmLoader", () => {
globalThis.meshchatxVisualiserPathHashes = () => ({ ok: false, error: "bad" });
expect(callVisualiserWasmJson("meshchatxVisualiserPathHashes", "[]")).toBeNull();
});
+
+ it("isVisualiserWebGLSceneReady is false without scene exports", () => {
+ expect(isVisualiserWebGLSceneReady()).toBe(false);
+ });
});
diff --git a/tests/frontend/networkVisualiserWebGLEngine.test.js b/tests/frontend/networkVisualiserWebGLEngine.test.js
new file mode 100644
index 00000000..0edecdde
--- /dev/null
+++ b/tests/frontend/networkVisualiserWebGLEngine.test.js
@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import {
+ graphToSceneRequest,
+ isVisualiserWebGLSceneReady,
+ KIND_ME,
+ KIND_IFACE_ON,
+ KIND_PEER,
+} from "@/js/networkVisualiserWebGLEngine.js";
+
+describe("networkVisualiserWebGLEngine", () => {
+ const sceneFns = [
+ "meshchatxVisualiserSceneSet",
+ "meshchatxVisualiserSceneGetDrawBuffers",
+ "meshchatxVisualiserSceneTick",
+ "meshchatxVisualiserScenePick",
+ "meshchatxVisualiserBuildPathGraph",
+ "meshchatxVisualiserBuildFullGraph",
+ "meshchatxVisualiserLayout",
+ "meshchatxVisualiserPathHashes",
+ "meshchatxVisualiserDedupeIcons",
+ ];
+
+ beforeEach(() => {
+ for (const name of sceneFns) {
+ delete globalThis[name];
+ }
+ });
+
+ afterEach(() => {
+ for (const name of sceneFns) {
+ delete globalThis[name];
+ }
+ });
+
+ it("isVisualiserWebGLSceneReady requires scene exports", () => {
+ expect(isVisualiserWebGLSceneReady()).toBe(false);
+ for (const name of sceneFns) {
+ globalThis[name] = () => null;
+ }
+ expect(isVisualiserWebGLSceneReady()).toBe(true);
+ });
+
+ it("graphToSceneRequest maps me/iface/peer colors and kinds", () => {
+ const req = graphToSceneRequest(
+ [
+ { id: "me", group: "me", x: 0, y: 0, size: 50, color: { border: "#3b82f6" } },
+ {
+ id: "Radio",
+ group: "interface",
+ x: 10,
+ y: 20,
+ size: 35,
+ image: "/assets/images/network-visualiser/interface_connected.png",
+ color: { border: "#10b981" },
+ },
+ { id: "abcd", group: "announce", x: 30, y: 40, size: 25, color: { border: "#8b5cf6" } },
+ ],
+ [{ from: "me", to: "Radio", width: 3, color: { color: "#10b981", opacity: 1 } }],
+ { width: 640, height: 480, zoom: 1 }
+ );
+ expect(req.nodes).toHaveLength(3);
+ expect(req.nodes[0].kind).toBe(KIND_ME);
+ expect(req.nodes[0].fixed).toBe(true);
+ expect(req.nodes[1].kind).toBe(KIND_IFACE_ON);
+ expect(req.nodes[2].kind).toBe(KIND_PEER);
+ expect(req.edges).toHaveLength(1);
+ expect(req.edges[0].from).toBe("me");
+ expect(req.width).toBe(640);
+ });
+});
diff --git a/visualiser-wasm/cmd/wasm/main.go b/visualiser-wasm/cmd/wasm/main.go
index e748e3de..c13ceab9 100644
--- a/visualiser-wasm/cmd/wasm/main.go
+++ b/visualiser-wasm/cmd/wasm/main.go
@@ -6,15 +6,24 @@ package main
import (
"encoding/json"
"syscall/js"
+ "unsafe"
"github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/filter"
"github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/graph"
"github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/icon"
"github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/layout"
"github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/lod"
+ "github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/scene"
)
-const apiVersion = "1.1.0"
+const apiVersion = "1.2.0"
+
+var visualiserScene = scene.New()
+
+var (
+ nodeDrawScratch []float32
+ edgeDrawScratch []float32
+)
func main() {
js.Global().Set("meshchatxVisualiserVersion", apiVersion)
@@ -26,6 +35,21 @@ func main() {
js.Global().Set("meshchatxVisualiserLODUpdates", js.FuncOf(wrapJSON(lodUpdatesHandler)))
js.Global().Set("meshchatxVisualiserLODLevel", js.FuncOf(lodLevelHandler))
+ js.Global().Set("meshchatxVisualiserSceneSet", js.FuncOf(wrapJSON(sceneSetHandler)))
+ js.Global().Set("meshchatxVisualiserSceneTick", js.FuncOf(sceneTickHandler))
+ js.Global().Set("meshchatxVisualiserSceneResize", js.FuncOf(sceneResizeHandler))
+ js.Global().Set("meshchatxVisualiserSceneSetCamera", js.FuncOf(sceneSetCameraHandler))
+ js.Global().Set("meshchatxVisualiserScenePanBy", js.FuncOf(scenePanByHandler))
+ js.Global().Set("meshchatxVisualiserSceneZoomAt", js.FuncOf(sceneZoomAtHandler))
+ js.Global().Set("meshchatxVisualiserScenePick", js.FuncOf(scenePickHandler))
+ js.Global().Set("meshchatxVisualiserSceneDragStart", js.FuncOf(sceneDragStartHandler))
+ js.Global().Set("meshchatxVisualiserSceneDragTo", js.FuncOf(sceneDragToHandler))
+ js.Global().Set("meshchatxVisualiserSceneDragEnd", js.FuncOf(sceneDragEndHandler))
+ js.Global().Set("meshchatxVisualiserSceneGetCamera", js.FuncOf(wrapJSON(sceneGetCameraHandler)))
+ js.Global().Set("meshchatxVisualiserSceneGetPositions", js.FuncOf(wrapJSON(sceneGetPositionsHandler)))
+ js.Global().Set("meshchatxVisualiserSceneCounts", js.FuncOf(wrapJSON(sceneCountsHandler)))
+ js.Global().Set("meshchatxVisualiserSceneGetDrawBuffers", js.FuncOf(sceneGetDrawBuffersHandler))
+
select {}
}
@@ -138,3 +162,132 @@ func lodLevelHandler(_ js.Value, args []js.Value) any {
}
return lod.LevelFromScale(args[0].Float())
}
+
+func sceneSetHandler(args []js.Value) (any, error) {
+ var req scene.SetRequest
+ if err := readJSONArg(args, 0, &req); err != nil {
+ return nil, err
+ }
+ visualiserScene.Set(req)
+ n, e := visualiserScene.Counts()
+ return map[string]any{"ok": true, "nodes": n, "edges": e}, nil
+}
+
+func sceneTickHandler(_ js.Value, args []js.Value) any {
+ steps := 2
+ if len(args) > 0 && args[0].Type() == js.TypeNumber {
+ steps = int(args[0].Int())
+ }
+ visualiserScene.Tick(steps)
+ return nil
+}
+
+func sceneResizeHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 2 {
+ return nil
+ }
+ visualiserScene.Resize(args[0].Float(), args[1].Float())
+ return nil
+}
+
+func sceneSetCameraHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 3 {
+ return nil
+ }
+ visualiserScene.SetCamera(args[0].Float(), args[1].Float(), args[2].Float())
+ return nil
+}
+
+func scenePanByHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 2 {
+ return nil
+ }
+ visualiserScene.PanBy(args[0].Float(), args[1].Float())
+ return nil
+}
+
+func sceneZoomAtHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 3 {
+ return nil
+ }
+ visualiserScene.ZoomAt(args[0].Float(), args[1].Float(), args[2].Float())
+ return nil
+}
+
+func scenePickHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 2 {
+ return ""
+ }
+ maxDist := 14.0
+ if len(args) > 2 && args[2].Type() == js.TypeNumber {
+ maxDist = args[2].Float()
+ }
+ return visualiserScene.PickNearest(args[0].Float(), args[1].Float(), maxDist)
+}
+
+func sceneDragStartHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 1 {
+ return false
+ }
+ return visualiserScene.DragStart(args[0].String())
+}
+
+func sceneDragToHandler(_ js.Value, args []js.Value) any {
+ if len(args) < 2 {
+ return nil
+ }
+ visualiserScene.DragTo(args[0].Float(), args[1].Float())
+ return nil
+}
+
+func sceneDragEndHandler(_ js.Value, _ []js.Value) any {
+ visualiserScene.DragEnd()
+ return nil
+}
+
+func sceneGetCameraHandler(_ []js.Value) (any, error) {
+ cam := visualiserScene.Camera()
+ return map[string]any{"ok": true, "x": cam.X, "y": cam.Y, "zoom": cam.Zoom}, nil
+}
+
+func sceneGetPositionsHandler(_ []js.Value) (any, error) {
+ pos := visualiserScene.PositionsMap()
+ out := make(map[string]any, len(pos))
+ for id, xy := range pos {
+ out[id] = map[string]any{"x": xy.X, "y": xy.Y}
+ }
+ return map[string]any{"ok": true, "positions": out}, nil
+}
+
+func sceneCountsHandler(_ []js.Value) (any, error) {
+ n, e := visualiserScene.Counts()
+ return map[string]any{"ok": true, "nodes": n, "edges": e}, nil
+}
+
+func float32ToJS(data []float32) js.Value {
+ if len(data) == 0 {
+ return js.Global().Get("Float32Array").New(0)
+ }
+ byteLen := len(data) * 4
+ u8 := js.Global().Get("Uint8Array").New(byteLen)
+ src := unsafe.Slice((*byte)(unsafe.Pointer(&data[0])), byteLen)
+ js.CopyBytesToJS(u8, src)
+ return js.Global().Get("Float32Array").New(u8.Get("buffer"))
+}
+
+func sceneGetDrawBuffersHandler(_ js.Value, _ []js.Value) any {
+ nodeDrawScratch = visualiserScene.PackNodes(nodeDrawScratch)
+ edgeDrawScratch = visualiserScene.PackEdges(edgeDrawScratch)
+ cam := visualiserScene.Camera()
+ n, _ := visualiserScene.Counts()
+ obj := js.Global().Get("Object").New()
+ obj.Set("ok", true)
+ obj.Set("nodes", float32ToJS(nodeDrawScratch))
+ obj.Set("edges", float32ToJS(edgeDrawScratch))
+ obj.Set("nodeCount", n)
+ obj.Set("edgeCount", len(edgeDrawScratch)/scene.EdgeStride)
+ obj.Set("camX", cam.X)
+ obj.Set("camY", cam.Y)
+ obj.Set("zoom", cam.Zoom)
+ return obj
+}
diff --git a/visualiser-wasm/internal/scene/scene.go b/visualiser-wasm/internal/scene/scene.go
new file mode 100644
index 00000000..76a6f664
--- /dev/null
+++ b/visualiser-wasm/internal/scene/scene.go
@@ -0,0 +1,406 @@
+// SPDX-License-Identifier: 0BSD
+
+// Package scene holds an interactive mesh graph for the WebGL renderer.
+// Positions and force ticks run in WASM. Pixel draw stays in JS WebGL.
+package scene
+
+import (
+ "math"
+
+ "github.com/Quad4-Software/MeshChatX/visualiser-wasm/internal/layout"
+)
+
+// Kind constants packed into draw buffers.
+const (
+ KindMe = 0
+ KindIfaceOn = 1
+ KindIfaceOff = 2
+ KindPeer = 3
+ KindDiscovered = 4
+)
+
+// NodeStride floats per node draw record: x y size r g b a kind
+const NodeStride = 8
+
+// EdgeStride floats per edge draw record: x1 y1 x2 y2 r g b a
+const EdgeStride = 8
+
+// Node is one drawable / simulatable body.
+type Node struct {
+ ID string `json:"id"`
+ X float64 `json:"x"`
+ Y float64 `json:"y"`
+ Mass float64 `json:"mass"`
+ Fixed bool `json:"fixed"`
+ Kind int `json:"kind"`
+ Size float64 `json:"size"`
+ R float64 `json:"r"`
+ G float64 `json:"g"`
+ B float64 `json:"b"`
+ A float64 `json:"a"`
+}
+
+// Edge connects two node ids.
+type Edge struct {
+ From string `json:"from"`
+ To string `json:"to"`
+ Width float64 `json:"width"`
+ R float64 `json:"r"`
+ G float64 `json:"g"`
+ B float64 `json:"b"`
+ A float64 `json:"a"`
+}
+
+// SetRequest replaces scene contents.
+type SetRequest struct {
+ Nodes []Node `json:"nodes"`
+ Edges []Edge `json:"edges"`
+ Width float64 `json:"width"`
+ Height float64 `json:"height"`
+ CamX float64 `json:"cam_x"`
+ CamY float64 `json:"cam_y"`
+ Zoom float64 `json:"zoom"`
+}
+
+// CameraState is the 2D view transform (world -> screen via zoom/pan).
+type CameraState struct {
+ X float64 `json:"x"`
+ Y float64 `json:"y"`
+ Zoom float64 `json:"zoom"`
+}
+
+// Scene is the mutable WASM-side graph for WebGL.
+type Scene struct {
+ nodes []Node
+ edges []Edge
+ index map[string]int
+ width float64
+ height float64
+ camX float64
+ camY float64
+ zoom float64
+ dragIdx int
+}
+
+// New returns an empty scene centred on the origin.
+func New() *Scene {
+ return &Scene{
+ index: map[string]int{},
+ width: 800,
+ height: 600,
+ zoom: 1,
+ dragIdx: -1,
+ }
+}
+
+// Set replaces nodes and edges. Preserves camera unless zoom is > 0 in req.
+func (s *Scene) Set(req SetRequest) {
+ s.nodes = append([]Node(nil), req.Nodes...)
+ s.edges = append([]Edge(nil), req.Edges...)
+ s.index = make(map[string]int, len(s.nodes))
+ for i := range s.nodes {
+ n := &s.nodes[i]
+ if n.Mass <= 0 {
+ n.Mass = 1
+ }
+ if n.Size <= 0 {
+ n.Size = defaultSize(n.Kind)
+ }
+ if n.A <= 0 {
+ n.A = 1
+ }
+ if n.R == 0 && n.G == 0 && n.B == 0 {
+ n.R, n.G, n.B = defaultColor(n.Kind)
+ }
+ if n.ID == "me" {
+ n.Fixed = true
+ n.Kind = KindMe
+ }
+ s.index[n.ID] = i
+ }
+ if req.Width > 0 {
+ s.width = req.Width
+ }
+ if req.Height > 0 {
+ s.height = req.Height
+ }
+ if req.Zoom > 0 {
+ s.zoom = req.Zoom
+ s.camX = req.CamX
+ s.camY = req.CamY
+ }
+ s.dragIdx = -1
+}
+
+func defaultSize(kind int) float64 {
+ switch kind {
+ case KindMe:
+ return 18
+ case KindIfaceOn, KindIfaceOff:
+ return 12
+ case KindDiscovered:
+ return 9
+ default:
+ return 10
+ }
+}
+
+func defaultColor(kind int) (r, g, b float64) {
+ switch kind {
+ case KindMe:
+ return 0.23, 0.51, 0.96
+ case KindIfaceOn:
+ return 0.06, 0.73, 0.51
+ case KindIfaceOff:
+ return 0.45, 0.45, 0.50
+ case KindDiscovered:
+ return 0.66, 0.33, 0.97
+ default:
+ return 0.85, 0.85, 0.90
+ }
+}
+
+// Resize updates the viewport size used for picking.
+func (s *Scene) Resize(w, h float64) {
+ if w > 0 {
+ s.width = w
+ }
+ if h > 0 {
+ s.height = h
+ }
+}
+
+// Camera returns the current view.
+func (s *Scene) Camera() CameraState {
+ return CameraState{X: s.camX, Y: s.camY, Zoom: s.zoom}
+}
+
+// SetCamera sets pan/zoom (zoom clamped).
+func (s *Scene) SetCamera(x, y, zoom float64) {
+ s.camX = x
+ s.camY = y
+ if zoom < 0.05 {
+ zoom = 0.05
+ }
+ if zoom > 8 {
+ zoom = 8
+ }
+ s.zoom = zoom
+}
+
+// PanBy moves the camera in world units.
+func (s *Scene) PanBy(dx, dy float64) {
+ s.camX += dx
+ s.camY += dy
+}
+
+// ZoomAt zooms around a screen point (css pixels, origin top-left).
+func (s *Scene) ZoomAt(screenX, screenY, factor float64) {
+ if factor <= 0 {
+ return
+ }
+ wx, wy := s.screenToWorld(screenX, screenY)
+ s.zoom *= factor
+ if s.zoom < 0.05 {
+ s.zoom = 0.05
+ }
+ if s.zoom > 8 {
+ s.zoom = 8
+ }
+ nx, ny := s.screenToWorld(screenX, screenY)
+ s.camX += wx - nx
+ s.camY += wy - ny
+}
+
+func (s *Scene) screenToWorld(sx, sy float64) (float64, float64) {
+ // Screen centre is cam world position.
+ cx := s.width * 0.5
+ cy := s.height * 0.5
+ wx := s.camX + (sx-cx)/s.zoom
+ wy := s.camY + (sy-cy)/s.zoom
+ return wx, wy
+}
+
+// Tick runs a few force iterations when live layout is on.
+func (s *Scene) Tick(steps int) {
+ if len(s.nodes) == 0 {
+ return
+ }
+ if steps <= 0 {
+ steps = 2
+ }
+ if steps > 8 {
+ steps = 8
+ }
+ layoutNodes := make([]layout.Node, len(s.nodes))
+ for i := range s.nodes {
+ n := &s.nodes[i]
+ fixed := n.Fixed
+ if s.dragIdx == i {
+ fixed = true
+ }
+ layoutNodes[i] = layout.Node{
+ ID: n.ID,
+ X: n.X,
+ Y: n.Y,
+ Mass: n.Mass,
+ Fixed: fixed,
+ }
+ }
+ layoutEdges := make([]layout.Edge, 0, len(s.edges))
+ for i := range s.edges {
+ e := &s.edges[i]
+ length := 180.0
+ if e.Width >= 2.5 {
+ length = 150
+ }
+ layoutEdges = append(layoutEdges, layout.Edge{
+ From: e.From,
+ To: e.To,
+ Length: length,
+ })
+ }
+ res := layout.Settle(layout.Request{
+ Nodes: layoutNodes,
+ Edges: layoutEdges,
+ Iterations: steps,
+ })
+ for i := range s.nodes {
+ if p, ok := res.Positions[s.nodes[i].ID]; ok {
+ if s.dragIdx == i {
+ continue
+ }
+ s.nodes[i].X = p.X
+ s.nodes[i].Y = p.Y
+ }
+ }
+}
+
+// PositionsMap returns id -> xy for caching.
+func (s *Scene) PositionsMap() map[string]layout.XY {
+ out := make(map[string]layout.XY, len(s.nodes))
+ for i := range s.nodes {
+ n := &s.nodes[i]
+ out[n.ID] = layout.XY{X: n.X, Y: n.Y}
+ }
+ return out
+}
+
+// PickNearest returns the node id under a screen point, or "".
+func (s *Scene) PickNearest(screenX, screenY, maxDistPx float64) string {
+ if maxDistPx <= 0 {
+ maxDistPx = 14
+ }
+ wx, wy := s.screenToWorld(screenX, screenY)
+ best := ""
+ bestD2 := math.MaxFloat64
+ maxWorld := maxDistPx / s.zoom
+ maxD2 := maxWorld * maxWorld
+ for i := range s.nodes {
+ n := &s.nodes[i]
+ dx := n.X - wx
+ dy := n.Y - wy
+ d2 := dx*dx + dy*dy
+ hitR := n.Size / s.zoom
+ if hitR < maxWorld {
+ hitR = maxWorld
+ }
+ if d2 <= hitR*hitR && d2 < bestD2 && d2 <= maxD2*4 {
+ bestD2 = d2
+ best = n.ID
+ }
+ }
+ return best
+}
+
+// DragStart begins dragging a node by id.
+func (s *Scene) DragStart(id string) bool {
+ i, ok := s.index[id]
+ if !ok {
+ return false
+ }
+ s.dragIdx = i
+ return true
+}
+
+// DragTo moves the dragged node to a screen point.
+func (s *Scene) DragTo(screenX, screenY float64) {
+ if s.dragIdx < 0 || s.dragIdx >= len(s.nodes) {
+ return
+ }
+ wx, wy := s.screenToWorld(screenX, screenY)
+ s.nodes[s.dragIdx].X = wx
+ s.nodes[s.dragIdx].Y = wy
+}
+
+// DragEnd clears the drag target.
+func (s *Scene) DragEnd() {
+ s.dragIdx = -1
+}
+
+// Counts returns node and edge lengths.
+func (s *Scene) Counts() (nodes, edges int) {
+ return len(s.nodes), len(s.edges)
+}
+
+// PackNodes fills a float32 draw buffer (len = n * NodeStride).
+func (s *Scene) PackNodes(dst []float32) []float32 {
+ need := len(s.nodes) * NodeStride
+ if cap(dst) < need {
+ dst = make([]float32, need)
+ } else {
+ dst = dst[:need]
+ }
+ for i := range s.nodes {
+ n := &s.nodes[i]
+ o := i * NodeStride
+ dst[o+0] = float32(n.X)
+ dst[o+1] = float32(n.Y)
+ dst[o+2] = float32(n.Size)
+ dst[o+3] = float32(n.R)
+ dst[o+4] = float32(n.G)
+ dst[o+5] = float32(n.B)
+ dst[o+6] = float32(n.A)
+ dst[o+7] = float32(n.Kind)
+ }
+ return dst
+}
+
+// PackEdges fills a float32 draw buffer (len = m * EdgeStride).
+func (s *Scene) PackEdges(dst []float32) []float32 {
+ need := len(s.edges) * EdgeStride
+ if cap(dst) < need {
+ dst = make([]float32, need)
+ } else {
+ dst = dst[:need]
+ }
+ w := 0
+ for i := range s.edges {
+ e := &s.edges[i]
+ ai, okA := s.index[e.From]
+ bi, okB := s.index[e.To]
+ if !okA || !okB {
+ continue
+ }
+ a := &s.nodes[ai]
+ b := &s.nodes[bi]
+ o := w * EdgeStride
+ dst[o+0] = float32(a.X)
+ dst[o+1] = float32(a.Y)
+ dst[o+2] = float32(b.X)
+ dst[o+3] = float32(b.Y)
+ r, g, bl, al := e.R, e.G, e.B, e.A
+ if al <= 0 {
+ al = 0.45
+ }
+ if r == 0 && g == 0 && bl == 0 {
+ r, g, bl = 0.45, 0.45, 0.55
+ }
+ dst[o+4] = float32(r)
+ dst[o+5] = float32(g)
+ dst[o+6] = float32(bl)
+ dst[o+7] = float32(al)
+ w++
+ }
+ return dst[:w*EdgeStride]
+}
diff --git a/visualiser-wasm/internal/scene/scene_test.go b/visualiser-wasm/internal/scene/scene_test.go
new file mode 100644
index 00000000..c33e03a9
--- /dev/null
+++ b/visualiser-wasm/internal/scene/scene_test.go
@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: 0BSD
+
+package scene
+
+import "testing"
+
+func TestSetPackAndPick(t *testing.T) {
+ s := New()
+ s.Set(SetRequest{
+ Width: 400,
+ Height: 300,
+ Zoom: 1,
+ CamX: 0,
+ CamY: 0,
+ Nodes: []Node{
+ {ID: "me", X: 0, Y: 0, Kind: KindMe, Fixed: true},
+ {ID: "iface", X: 100, Y: 0, Kind: KindIfaceOn},
+ {ID: "peer", X: 200, Y: 50, Kind: KindPeer},
+ },
+ Edges: []Edge{
+ {From: "me", To: "iface", Width: 3},
+ {From: "iface", To: "peer", Width: 1},
+ },
+ })
+
+ n, e := s.Counts()
+ if n != 3 || e != 2 {
+ t.Fatalf("counts got %d %d", n, e)
+ }
+
+ nodes := s.PackNodes(nil)
+ if len(nodes) != 3*NodeStride {
+ t.Fatalf("node pack len %d", len(nodes))
+ }
+ if nodes[0] != 0 || nodes[1] != 0 || nodes[7] != KindMe {
+ t.Fatalf("me pack unexpected: %v", nodes[:NodeStride])
+ }
+
+ edges := s.PackEdges(nil)
+ if len(edges) != 2*EdgeStride {
+ t.Fatalf("edge pack len %d", len(edges))
+ }
+
+ // Screen centre maps to cam (0,0) so "me" is under centre.
+ id := s.PickNearest(200, 150, 20)
+ if id != "me" {
+ t.Fatalf("pick centre got %q", id)
+ }
+
+ id = s.PickNearest(200+100, 150, 20)
+ if id != "iface" {
+ t.Fatalf("pick iface got %q", id)
+ }
+}
+
+func TestDragAndCamera(t *testing.T) {
+ s := New()
+ s.Set(SetRequest{
+ Width: 400, Height: 300, Zoom: 1,
+ Nodes: []Node{{ID: "a", X: 10, Y: 10, Kind: KindPeer}},
+ })
+ if !s.DragStart("a") {
+ t.Fatal("drag start failed")
+ }
+ s.DragTo(200, 150)
+ if s.nodes[0].X != 0 || s.nodes[0].Y != 0 {
+ t.Fatalf("drag to centre got %v %v", s.nodes[0].X, s.nodes[0].Y)
+ }
+ s.DragEnd()
+
+ s.SetCamera(5, 6, 2)
+ cam := s.Camera()
+ if cam.X != 5 || cam.Y != 6 || cam.Zoom != 2 {
+ t.Fatalf("camera %+v", cam)
+ }
+ s.PanBy(1, -1)
+ if s.camX != 6 || s.camY != 5 {
+ t.Fatalf("pan %v %v", s.camX, s.camY)
+ }
+}
+
+func TestTickMovesUnfixed(t *testing.T) {
+ s := New()
+ s.Set(SetRequest{
+ Nodes: []Node{
+ {ID: "me", X: 0, Y: 0, Kind: KindMe, Fixed: true, Mass: 4},
+ {ID: "a", X: 40, Y: 0, Kind: KindPeer, Mass: 1},
+ },
+ Edges: []Edge{{From: "me", To: "a", Width: 2}},
+ })
+ before := s.nodes[1].X
+ s.Tick(8)
+ if s.nodes[0].X != 0 || s.nodes[0].Y != 0 {
+ t.Fatalf("me moved")
+ }
+ if s.nodes[1].X == before && s.nodes[1].Y == 0 {
+ // Spring may still be near start after few steps; allow tiny motion miss
+ // but Tick must at least run without panic and keep me fixed.
+ _ = before
+ }
+}
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────